<template>
    <div class="default-main ba-table-box">
        <section>
            <div class="table-header shou" v-if="mainOperate != 'view'">
                <div>
                    <el-button type="success" @click="handleAdd(0)">新增应收</el-button>
                    <!-- <el-button type="danger" @click="handleDelete(0)">删除应收</el-button> -->
                </div>
                <div>
                    <el-button type="success" @click="handleCalcu">自动计算</el-button>
                    <el-button type="danger" @click="handleCancelCalcu">取消自动费用</el-button>
                </div>
                <div v-if="menu == 'add'">
                    <el-button type="primary" @click="handleApprove(1)">全部提交审核</el-button>
                    <el-button type="primary" plain @click="handleApprove(2)">全部取消提交</el-button>
                </div>
                <div v-else>
                    <el-button type="primary" @click="handleApproveAll(1)">全部审核</el-button>
                    <el-button type="primary" plain @click="handleApproveAll(2)">全部取消审核</el-button>
                </div>
            </div>
            <el-table :data="state.tableShou" 
            style="width: 100%" 
            @selection-change="val=>handleSelectionChange(val,0)" 
            @row-dblclick="handleView" 
            :row-class-name="tableRowClassName">
                <!-- <el-table-column type="selection" width="55" /> -->
                <el-table-column prop="CORPCODE" label="来往单位" width="120" show-overflow-tooltip/>
                <el-table-column prop="ITEMCODE" label="费用项目" width="80" />
                <el-table-column prop="MONEYTYPE" label="币别" width="80" show-overflow-tooltip/>
                <el-table-column prop="MONEY" label="金额" width="80" show-overflow-tooltip/>
                <el-table-column prop="TAXRATE" label="税率" width="80" show-overflow-tooltip/>
                <el-table-column prop="AMOUNT" label="数量" width="80" show-overflow-tooltip/>
                <el-table-column prop="PRICETYPE" label="计价单位" show-overflow-tooltip/>
                <el-table-column prop="RATIO" label="费率" show-overflow-tooltip/>
                <el-table-column prop="AUTOADD" label="计算方式" >
                    <template #default="scope">
                        {{ scope.row.AUTOADD == '1'?'自动':scope.row.AUTOADD == '0'?'手动':"" }}
                    </template>
                </el-table-column>
                <el-table-column prop="BILLID" label="对账单号" show-overflow-tooltip/>
                <el-table-column prop="BILLDATE" label="对账单日期" width="100" show-overflow-tooltip/>
                <el-table-column prop="OPNAME" label="对账人" show-overflow-tooltip/>
                <el-table-column prop="JOBNO" label="JOB NO" show-overflow-tooltip />
                <el-table-column label="操作" fixed="right" width="100" v-if="mainOperate != 'view'">
                    <template #default="scope">

                        <el-button type="primary" style="padding:4px 5px;height: auto;" :disabled="scope.row.TJFLAG =='1'||scope.row.CHECKED =='1'" @click="handleEdit(scope.row)">
                            <span><i class="fa fa-pencil icon"></i></span>
                        </el-button>
                        <el-popconfirm title="确定删除选中记录?" @confirm="handleDelItem(scope.row)">
                            <template #reference>
                            <el-button type="danger" style="padding:4px 5px;height: auto;" 
                            :disabled="scope.row.TJFLAG =='1'||scope.row.CHECKED =='1'">
                                <span><i class="fa fa-trash icon"></i></span>
                            </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </section>
        <section style="margin-top:30px">
            <div class="table-header" v-if="mainOperate != 'view'">
                <div>
                    <el-button type="success" @click="handleAdd(1)">新增应付</el-button>
                    <!-- <el-button type="danger" @click="handleDelete(1)">删除应付</el-button> -->
                </div>
            </div>
            <el-table :data="state.tableFu" 
            style="width: 100%" 
            @selection-change="val=>handleSelectionChange(val,1)" 
            @row-dblclick="handleView"
            :row-class-name="tableRowClassName"
            >
                <!-- <el-table-column type="selection" width="55" /> -->
                <el-table-column prop="CORPCODE" label="来往单位" width="180" show-overflow-tooltip/>
                <el-table-column prop="ITEMCODE" label="费用项目" width="80" show-overflow-tooltip/>
                <el-table-column prop="MONEYTYPE" label="币别" width="80" show-overflow-tooltip/>
                <el-table-column prop="MONEY" label="金额" width="80" show-overflow-tooltip />
                <el-table-column prop="TAXRATE" label="税率" width="80" show-overflow-tooltip/>
                <el-table-column prop="AMOUNT" label="数量" width="80" show-overflow-tooltip/>
                <el-table-column prop="PRICETYPE" label="计价单位" show-overflow-tooltip/>
                <el-table-column prop="RATIO" label="费率" show-overflow-tooltip/>
                <el-table-column prop="AUTOADD" label="计算方式" >
                    <template #default="scope">
                        {{ scope.row.AUTOADD == '1'?'自动':scope.row.AUTOADD == '0'?'手动':"" }}
                    </template>
                </el-table-column>
                <el-table-column prop="OPNAME" label="对账人" show-overflow-tooltip/>
                <el-table-column prop="BILLID" label="对账单号" show-overflow-tooltip/>
                <el-table-column prop="BILLDATE" label="对账单日期" width="100" show-overflow-tooltip/>
                <el-table-column prop="JOBNO" label="JOB NO" show-overflow-tooltip/>
                <el-table-column label="操作" fixed="right" width="100" v-if="mainOperate != 'view'">
                    <template #default="scope">
                        <el-button type="primary" style="padding:4px 5px;height: auto;" 
                        :disabled="scope.row.TJFLAG =='1'||scope.row.CHECKED =='1'" 
                        @click="handleEdit(scope.row)">
                            <span><i class="fa fa-pencil icon"></i></span>
                        </el-button>
                        <el-popconfirm title="确定删除选中记录?" @confirm="handleDelItem(scope.row)">
                            <template #reference>
                            <el-button type="danger" style="padding:4px 5px;height: auto;" 
                            :disabled="scope.row.TJFLAG =='1'||scope.row.CHECKED =='1'" >
                                <span><i class="fa fa-trash icon"></i></span>
                            </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </section>
        <!-- 表单 -->
        <PopupForm @onAfterSave="getTableList" />
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted, reactive, inject, watchEffect } from 'vue'
import PopupForm from './popupForm.vue'
import { bill } from '/@/api/controllerUrls'
import createAxios from '/@/utils/axios'
import baTableClass from '/@/utils/baTable'
import { baTableApi } from '/@/api/common'
import { ElMessage } from 'element-plus'

const TZID = inject('TZID')

const mainOperate = inject('mainOperate')

interface Props {
    menu?: string
}

const props = withDefaults(defineProps<Props>(), {
    menu: 'add',  //另有approve 未审批时候
})

const baTable = new baTableClass(
    new baTableApi(bill),
    {
        pk: 'BILLID',
        column:[]
    },
    {
        defaultItems: [],
    }
)
provide('baTable', baTable)


const state = reactive({
    tableShou:[],
    tableFu:[],
    selectShou:[],
    selectFu:[],
})

onMounted(()=>{
    baTable.form.operate = ''
    getTableList()
})

const getTableList = ()=>{
    createAxios({
        url:bill + 'index?tzid='+TZID.value,
        method:'get'
    }).then((res:any)=>{
        state.tableFu = res.data.fu.list
        state.tableShou = res.data.shou.list
    })
}


const handleAdd = (type:number)=>{
    baTable.form.operate = 'add'
    baTable.form.items!.BILLTYPE = type //0 应收 1 应付
}

const handleView = (row:any)=>{
    baTable.form.items = JSON.parse(JSON.stringify(row)) 
    baTable.form.operate = 'view'
}

const handleEdit = (item:any)=>{
    baTable.form.items = JSON.parse(JSON.stringify(item)) 
    baTable.form.operate = 'edit'
}

const handleDelItem = (item:any)=>{
    createAxios({
        url:bill + 'del',
        data:{
            ids:[item.BILLID]
        },
        method:'DELETE'
    }).then((res:any)=>{
        getTableList()
        ElMessage({
            message:'删除成功',
            type:'success'
        })
    })
}

const handleCalcu = ()=>{
    createAxios({
        url:bill+'calculation?tzid='+TZID.value,
        method:'get'
    }).then((res:any)=>{
        ElMessage({
            message:'提交成功！',
            type:'success'
        })
    })
}
const handleCancelCalcu = ()=>{
    createAxios({
        url:bill+'cancel?tzid='+TZID.value,
        method:'get'
    }).then((res:any)=>{
        ElMessage({
            message:'取消成功',
            type:'success'
        })
    })
}

const handleApprove = (type:number)=>{
    createAxios({
        url:bill + 'tj?tzid='+TZID.value+'&type='+type,
        method:'get'
    }).then((res:any)=>{
        getTableList()
        ElMessage({
            message:type==1?'提交成功':'取消成功',
            type:'success'
        })
    })
}
const handleApproveAll = (type:number)=>{
    createAxios({
        url:bill + 'examine?TZID='+TZID.value+'&types='+type,
        method:'get'
    }).then((res:any)=>{
        ElMessage({
            message:type==1?'审核成功':'取消成功',
            type:'success'
        })
        getTableList()
    })
}


const handleSelectionChange = (val:any,type:number)=>{
    type==0?state.selectShou = val:state.selectFu = val
}


const handleDelete = (type:number)=>{
    let currentList = type==0?state.selectShou.map(item=>item.BILLID):state.selectFu.map(item=>item.BILLID)
    if(currentList.length==0) return
    console.log(currentList)
    createAxios({
        url:bill + 'del',
        data:{
            ids:currentList
        },
        method:'DELETE'
    }).then((res:any)=>{
        getTableList()
        ElMessage({
            message:'删除成功',
            type:'success'
        })
    })
}

const tableRowClassName = ({
  row
}: {
  row: any
}) => {
    if(row.TJFLAG == "1"){
        return 'flag'
    }
    if(row.CHECKED == '1'){
        return 'checked'
    }
    return ''
}


</script>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'bill',
})
</script>

<style scoped lang="scss">
.table-header{
    display: flex;
    margin-bottom: 20px;
    &.shou{
        justify-content: space-between;
    }
}
:deep(.el-table__row){
    &.flag{
        background: #D9F2AD;
    }
    &.checked{
        background: #F7E6E6;
    }
} 

</style>
